<template>
  <div class="hello">
    <transition name="mytop">
      <div class="top" v-show="showTop">
        <ul>
          <li>
            <router-link ref="aboutMe" to="/aboutMe">关于</router-link>
          </li>
          <li>
            <router-link ref="works" to="/works">作品</router-link>
          </li>
          <li>
            <router-link ref="skill" to="/skill">能力</router-link>
          </li>
          <li>
            <router-link ref="contact" to="/contact">联系</router-link>
          </li>
        </ul>
      </div>
    </transition>
    <router-link to="/">
      <transition name="myImg">
        <div v-show="show" ref="circle" class="circle"></div>
      </transition>
    </router-link>
    <router-view v-show="showComponent"></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      showTop: false,
      showComponent: false,
      path: null
    }
  },
  mounted () {
    this.path = this.$route.path
    this.show = true
    this.showTop = true
    setTimeout(() => {
      this.showComponent = true
    }, 3000)
  },
  methods: {},
  watch: {
    '$route.path' (val) {
      this.path = this.$route.path
    },
    'path' (val) {
      this.$refs.aboutMe.$el.style.color = '#fff'
      this.$refs.works.$el.style.color = '#fff'
      this.$refs.skill.$el.style.color = '#fff'
      this.$refs.contact.$el.style.color = '#fff'
      if (val === '/') {
        this.$refs.circle.style.borderTopColor = 'red'
        this.$refs.circle.style.borderBottomColor = 'yellow'
        return
      } else {
        this.$refs.circle.style.borderColor = 'white'
      }
      const colorArr = ['blue', 'aqua', 'teal', 'olive', 'green', 'lime', 'yellow', 'orange', 'red', 'maroon', 'fuchsia', 'purple']
      const index = Math.floor(Math.random() * colorArr.length)
      const color = colorArr[index]
      const target = val.slice(1)
      this.$refs[target].$el.style.color = color
    }
  }
}
</script>

<style lang='scss' scoped>
.hello {
  height: 100%;
  overflow: hidden;
  .header {
    position: absolute;
    width: 100%;
  }
  .top {
    height: 80px;
    background: rgba(0,0,0,0.4);
    float: left;
    width: 100%;
    ul {
      overflow: hidden;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-around;
      li {
        float: left;
        height: 100%;
        width: 150px;
        line-height: 80px;
        font-size: 27px;
        font-weight: 600;
        // background: red;
        a {
          display: block;
          width: 100%;
          height: 100%;
          color:#fff;
        }
        &:nth-child(2),
        &:nth-child(3) {
          position: relative;
          top: 0;
        }
        &:nth-child(2) {
          left: -50px;
        }
        &:nth-child(3) {
          left: 50px;
        }
      }
    }
  }
  .circle {
    height: 200px;
    width: 200px;
    background: url(../assets/images/boy.jpg) no-repeat;
    background-size: 100% 100%;
    border-top: 5px solid red;
    border-bottom: 5px solid yellow;
    border-radius: 50%;
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    &::after {
      font-size: 20px;
      color: red;
      -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
      content: '';
      position: absolute;
      bottom: -30px;
      left: 54px;
    }
  }
  .myImg-enter-active {
    animation: myanm 3s;
    &::after {
      content: '加载中。。。'
    }
  }
  .mytop-enter-active {
    transition: all 3s ease;
    transition-delay: 3s;
  }
  .mytop-enter {
    opacity: 0;
  }
}

@keyframes myanm {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateZ(180deg);
  }
  25% {
    top: 40%;
    transform: translateX(-50%) rotateZ(360deg);
  }
  50% {
    top: 30%;
    transform: translateY(-50%) rotateZ(720deg);
  }
  75% {
    top: 20%;
    transform: translateX(-50%) rotateZ(360deg);
  }
  80% {
    transform: translateX(-50%) rotatez(0deg) scale(0.5);
    top: -80px;
    left: 50%;
  }
  90% {
    top: 0px;
  }
  95% {
    top: -60px;
  }
  100% {
    top: -52px;
  }
}
</style>

